.dialog-container-screen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.dialogContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 480px;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    transition: all 0.25s linear;
    transform: translate(-50%, calc(-50% - 50px));
    opacity: 0;
    z-index: -999;
    width: 640px;

    .dialog-header {
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        font-weight: 600;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid rgb(240, 240, 240);

        .headerLabel {
            width: 85%;
            font-size: 14px;
            font-weight: 600;
            padding: 5px;
        }

        .headerClose {
            width: 15%;
            text-align: right;

            button {
                background-color: transparent;
                border: 0;
                width: 60%;
                height: 40px;
                cursor: pointer;
            }
        }
    }

    .dialog-main {
        width: 100%;
        height: calc(100% - 80px);
        border-bottom: 1px solid rgb(240, 240, 240);
        overflow-y: auto;
    }

    .dialog-footer {
        position: fixed;
        width: 100%;
        height: 40px;
        bottom: 0px;

        .footer-button {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .footer-button-close {
            background-color: #F56C6C;
            border: 0;
            margin: 0 10px;
            width: 60px;
            height: 30px;
            border-radius: 5px;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }

        .footer-button-access {
            background-color: #67C23A;
            border: 0;
            margin: 0 10px;
            width: 60px;
            height: 30px;
            border-radius: 5px;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }
    }
}

.dialog-container-join {
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 10000;
}

.dialog-container-leave {
    transform: translate(-50%, calc(-50% + 50px));
    opacity: 0;
}